<!--
 * @Descripttion : 
 * @Autor        : Lilong
 * @Date         : 2022-09-30 10:53:02
 * @LastEditTime : 2022-10-01 07:21:35
 * @FilePath     : \表单控件绑定\v-model和组件\第四种(自定义v-model修饰符)\不带参数的修饰符\第一种：defineComponent\my-component.vue
-->
// src/components/my-component.vue

<template>
    <input
        type="text"
        :value="modelValue"
        @input="emitValue($event)"
    >
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: 'MyComponent',
    emits: ['update:modelValue'],
    props: {
        modelValue: String,
        modelModifiers: {
            default: () => ({})
        }
    },
    created() {
        console.log('1', this.modelModifiers)
    },
    setup(props, context) {
        const emitValue = (e) => {
            let value = e.target.value
            if (props.modelModifiers.capitalize) {   //不带参数的通过this.modelModifiers可以访问到修饰符
                value = value.charAt(0).toUpperCase() + value.slice(1)
            }
            context.emit('update:modelValue', value)
        }

        return {
            emitValue
        }
    }
})
</script>